<template>
  <div class="material-visualization flex h-full bg-background text-foreground">
    <!-- 左侧：地图 -->
    <div class="w-2/3 relative">
      <div id="map" class="h-full w-full"></div>
      <div class="absolute bottom-4 left-4 bg-card text-card-foreground p-2 rounded shadow z-[1000]">
        <h3 class="font-bold mb-2">图例</h3>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-red-500 rounded-full mr-2"></span>
          <span>应急专家</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-green-500 rounded-full mr-2"></span>
          <span>应急队伍</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
          <span>应急车辆</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
          <span>物资仓库</span>
        </div>
      </div>
    </div>

    <!-- 右侧：物资信息 -->
    <div class="w-1/3 bg-muted p-4 overflow-y-auto">
      <h2 class="text-xl font-bold mb-4">总体物资库存情况</h2>
      
      <!-- 物资类型图标 -->
      <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">
            <span class="material-icons">safety_vest</span>
          </div>
          <span class="text-sm">特种防护装备</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">
            <span class="material-icons">science</span>
          </div>
          <span class="text-sm">化学事故处理设备</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">
            <span class="material-icons">local_fire_department</span>
          </div>
          <span class="text-sm">消防设备</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">
            <span class="material-icons">biotech</span>
          </div>
          <span class="text-sm">检测与监测设备</span>
        </div>
      </div>

      <!-- 物资数量信息 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-6">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <h3 class="font-bold mb-2">应急灯</h3>
            <p>可用数量: <span class="text-blue-500">100</span></p>
            <p>已分配数量: <span class="text-green-500">100</span></p>
          </div>
          <div>
            <h3 class="font-bold mb-2">安全标识和警示牌</h3>
            <p>可用数量: <span class="text-blue-500">100</span></p>
            <p>已分配数量: <span class="text-green-500">100</span></p>
          </div>
          <div>
            <h3 class="font-bold mb-2">防毒面具</h3>
            <p>可用数量: <span class="text-blue-500">100</span></p>
            <p>已分配数量: <span class="text-green-500">100</span></p>
          </div>
          <div>
            <h3 class="font-bold mb-2">安全帽和手套</h3>
            <p>可用数量: <span class="text-blue-500">100</span></p>
            <p>已分配数量: <span class="text-green-500">100</span></p>
          </div>
        </div>
      </div>

      <!-- 物资分类饼图 -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h3 class="font-bold mb-4">物资分类</h3>
        <div id="pieChart" style="width: 100%; height: 300px;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import * as echarts from 'echarts'

let map = null
let pieChart = null

onMounted(() => {
  initMap()
  initPieChart()
})

onUnmounted(() => {
  if (map) {
    map.remove()
  }
  if (pieChart) {
    pieChart.dispose()
  }
})

function initMap() {
  map = L.map('map').setView([34.795, 109.942], 14)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  addMarker([34.795, 109.942], '应急指挥中心', 'red')
  addMarker([34.797, 109.945], '应急队伍', 'green')
  addMarker([34.793, 109.940], '物资仓库', 'yellow')
}

function addMarker(position, title, color) {
  const marker = L.circleMarker(position, {
    radius: 8,
    fillColor: color,
    color: '#000',
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }).addTo(map)

  marker.bindPopup(title)
}

function initPieChart() {
  const chartDom = document.getElementById('pieChart')
  pieChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '物资分类',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 22, name: '消防设备' },
          { value: 20, name: '应急照明设备' },
          { value: 20, name: '医疗救护用品' },
          { value: 20, name: '防护装备' },
          { value: 18, name: '其他设备' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pieChart.setOption(option)
}
</script>

<style scoped>
.material-visualization {
  height: calc(100vh - 64px); /* 假设顶部导航栏高度为64px，根据实际情况调整 */
}

#map {
  height: 100%;
  width: 100%;
}
</style>
